<template>
	<!-- 20221121 -->
	<view class="layer-sku-cn">
		<!-- 组件内容 -->
		<view class="cn-content">
			<ty-layer-pop-up @overlayClick="close" v-if="show">
				<!-- 浮层内容 -->
				<view class="layer-content bg-ff" @click.stop="">

					<view class="padding-lr-30">
						<!-- 图片 名称 价钱 库存 关闭浮层按钮 -->
						<view class="position-relative padding-top-40 padding-bottom-20">
							<view class="flex align-center">
								<!-- 图片 -->
								<image class="jc-image-200 radius-10" mode="aspectFill"
									:src="product1.cover_img">
								</image>
								
								<view class="margin-left-20 flex-one">
									<!-- 商城价钱 -->
									<view v-if="type == 1">
										<view class="text-30 text-main"
											v-if="product1.price_min != product1.price_max">
											¥{{product1.price_min}}-{{product1.price_max}}
										</view>
										<view class="text-30 text-main"
											v-if="product1.price_min == product1.price_max">
											¥{{product1.price_min}}
										</view>
									</view>

									<!-- 积分商城价钱 -->
									<view class="line-height-35 text-40 flex align-center" v-if="type == 2">
										<text class="text-30 text-main">
											{{product1.integral}}积分
										</text>
										<text class="text-28 text-77"
											v-if="product1.price != 0">
											+¥{{product1.price}}
										</text>
									</view>
									
									<!-- sku名称 -->
									<view class="margin-top-10 line-40 height-80 text-cut-two text-24 text-33">
										{{product1.sku_name}}
									</view>
									
									<!-- 库存 -->
									<view class="margin-top-45 text-24 text-aa">库存:{{product1.stock}}件</view>
								</view>
							</view>
							
							<!-- 关闭按钮 -->
							<text class="close-btn tyIcon-close text-30 text-aa" @click="close"></text>
						</view>

						<!-- 规格和数量 滚动区域 -->
						<scroll-view class="scroll-view padding-bottom-safe-footer-20" scroll-y="true">
							<!-- 规格 -->
							<view v-for="(item,index) in product1.spec_list" :key="index"
								v-if="product1.is_spec_open == 1">
								<!-- 规格项组名称 -->
								<view class="spec-item-title padding-top-20 padding-bottom-5 text-30 text-bold">{{item.spec_title}}</view>
								<!-- 规格项明细 -->
								<view class="flex align-center flex-wrap">
									<view class="spec-item text-cut-one" :class="item1.class"
										v-for="(item1,index1) in item.productSpecItem" :key="index1"
										@click="clickSku(index,index1)">
										{{item1.spec_item_value}}
									</view>
								</view>
							</view>

							<!-- 数量 -->
							<view class='margin-tb-25 flex align-center justify-between'>
								<text class="text-30 text-bold">数量</text>
								<ty-text-stepper :value.sync="number" min="1" :max="product1.stock">
								</ty-text-stepper>
							</view>
						</scroll-view>


					</view>

					<!-- 底部条 -->
					<view class="jc-footer-safe bg-ff">
						<view
							class="padding-lr-30 padding-tb-20 text-center flex align-center justify-between">
							<!-- 展示确定按钮 -->
							<view class="width-100p line-height-90 radius-45 bg-main text-32 text-bold text-ff" @click="confirm(3)"
								v-if="btnType == 1">
								确定
							</view>
							
							<!-- 展示加入购物车和立即购买按钮 -->
							<view class="line-height-90 radius-45 bg-auxiliary text-32 text-bold text-ff" style="width: 335rpx;" @click="confirm(1)"
								v-if="btnType == 2">
								{{type == 1 ? '加入购物车' : '加入兑换车'}}
							</view>
							<view class="line-height-90 radius-45 bg-main text-32 text-bold text-ff" style="width: 335rpx;" @click="confirm(2)"
								v-if="btnType==2">
								{{type == 1 ? '立即购买' : '立即兑换'}}
							</view>
						</view>
					</view>
				</view>
			</ty-layer-pop-up>
		</view>

		<!-- 组件浮层 -->
		<view class="cn-layer">

		</view>
	</view>
</template>

<script>
	import common from '@/components/hzjc/utils/common.js';
	export default {
		data() {
			return {
				// 购买数量
				number: 1
			}
		},
		props: {
			// 浮层是否显示
			show: {
				type: Boolean,
				default: false
			},
			// 商品信息
			product: {
				type: Object,
				default: {}
			},
			// 按钮类型 1--点击确定类型进入浮层，下面显示确定 2--不确定类型进入浮层，下面显示加入购物车和立即购买
			btnType: {
				type: [Number, String],
				default: 1
			},
			// 类型 1--商城 2--积分商城
			type: {
				type: [Number, String],
				default: 1
			}
		},

		computed: {
			product1: function() {
				let product1 = {}
				if (this.product.id) {

					// 没有开启规格的时候
					if (this.product.is_spec_open == 0) {
						product1 = {
							is_spec_open: this.product.is_spec_open,
							cover_img: this.product.cover_img,
							price_min: this.product.price_min,
							price_max: this.product.price_max,
							stock: this.product.stock,
							sku_name: '',
							choose_sku: [],

							// 积分商城
							price: this.product.price,
							integral: this.product.integral
						}
						return product1
					}

					// 没有初始化过的话初始化product对象
					if (!this.product.spec[0].hasOwnProperty('choose')) {
						let product = this.product
						for (let i in product.spec) {
							product.spec[i].choose = 0 //初始默认不选中
							for (let j in product.spec[i].productSpecItem) {
								product.spec[i].productSpecItem[j].choose = 0 //初始默认不选中
							}
						}
						this.$emit("update:product", product)
					}

					// 有开启规格的时候
					let spec_list = Object.assign({}, this.product.spec);
					let sku_list = this.product.productSku

					// 循环遍历获取对应文案和已选规格
					// 选中的SKU规格项
					let choose_sku = []
					// 选中的规格文案   已选择XXXXXX
					let has_choose_spec_item_text = []
					// 没有选中的规格项-展示文案  请选择XXXXXXX
					let no_choose_spec_text = []
					for (let i in spec_list) {
						if (spec_list[i].choose == 1) {
							for (let j in spec_list[i]['productSpecItem']) {
								if (spec_list[i]['productSpecItem'][j]['choose'] == 1) {
									choose_sku.push(spec_list[i]['productSpecItem'][j]['spec_item_id'])
									has_choose_spec_item_text.push(spec_list[i]['productSpecItem'][j]
										.spec_item_value)
								}
							}
						} else {
							no_choose_spec_text.push(spec_list[i]['spec_title'])
						}
					}

					// 上方展示字段
					let whereItem = []
					whereItem = whereItem.concat(choose_sku)
					whereItem = whereItem.sort()
					let reg = new RegExp('\\w*' + whereItem.join('\\w*') + '\\w*');
					
					product1 = {
						is_spec_open: this.product.is_spec_open,
						cover_img: '',
						price_min: '',
						price_max: 0,
						stock: 0,
					}
					for (let index in sku_list) {
						if (reg.test(sku_list[index].sku)) {
							product1.cover_img = product1.cover_img ? product1.cover_img : sku_list[index].cover_img
							product1.price_max = sku_list[index].price > product1.price_max ? sku_list[index].price :
								product1.price_max
							product1.price_min = product1.price_min === '' ? sku_list[index].price : (sku_list[index]
								.price < product1.price_min ? sku_list[index].price :
								product1.price_min)
							product1.stock += sku_list[index].stock
							
							// 积分商城
							product1.integral = no_choose_spec_text.length == 0 ? sku_list[index].integral : this.product.integral 
							product1.price = no_choose_spec_text.length == 0 ? sku_list[index].price : this.product.price 
						}
					}
					// 遍历规格项进行库存判断
					for (let i in spec_list) {
						for (let j in spec_list[i].productSpecItem) {
							if (spec_list[i].productSpecItem[j].choose == 1) { //选中
								spec_list[i].productSpecItem[j].has_stock = 1
								spec_list[i].productSpecItem[j].class = 'active'
							} else {
								let whereItem = []
								whereItem = whereItem.concat(choose_sku)

								//如果选过该规格下的某项，则删除该项
								for (let k in spec_list[i].productSpecItem) {
									let arr_index = whereItem.indexOf(spec_list[i].productSpecItem[k].spec_item_id)
									if (arr_index > -1) {
										whereItem.splice(arr_index, 1)
									}
								}

								//添加该规格项组成按顺序组成新的SKU规格判断库存
								whereItem.push(spec_list[i].productSpecItem[j].spec_item_id)
								whereItem = whereItem.sort()
								let reg = new RegExp('\\w*' + whereItem.join('\\w*') + '\\w*');
								let stock = 0 //匹配到的规格组合
								for (let index in sku_list) {
									if (reg.test(sku_list[index].sku)) {
										stock += sku_list[index].stock
									}
								}

								spec_list[i].productSpecItem[j].has_stock = stock == 0 ? 0 : 1
								spec_list[i].productSpecItem[j].class = stock == 0 ? 'none' : 'normal'
							}
						}
					}

					product1.spec_list = spec_list
					product1.sku_list = sku_list
					product1.sku_name = no_choose_spec_text.length == 0 ?
						'已选: ' + has_choose_spec_item_text.join(' ') :
						'请选择: ' + no_choose_spec_text.join(' ')
					product1.choose_sku = choose_sku
				}
				return product1
			},
		},

		methods: {
			//关闭浮层
			close: function() {
				this.$emit("update:show", false)
			},

			//点击切换规格
			clickSku: function(spec_index, item_index) {
				//当前没有库存的规格项不能点击
				if (!this.product1.spec_list[spec_index].productSpecItem[item_index].has_stock) {
					return false
				}

				let product = Object.assign({}, this.product);
				let cur_choose = product.spec[spec_index].productSpecItem[item_index].choose
				//选中与否
				if (cur_choose == 1) { //当前item被选中
					product.spec[spec_index].choose = 0;
					product.spec[spec_index].productSpecItem[item_index].choose = 0;
				} else if (cur_choose == 0) { // 当前item未选中
					for (let i in product.spec) { //清除同规格所有规格项选中状态
						if (i == spec_index) {
							for (let j in product.spec[i].productSpecItem) {
								product.spec[i].productSpecItem[j].choose = 0;
							}
						}
					}
					product.spec[spec_index].choose = 1;
					product.spec[spec_index].productSpecItem[item_index].choose = 1;
				}

				//TODO 计算属性监听不到属性值的改变
				if (product.hasOwnProperty('time')) {
					delete product.time
					product.time = common.curTimestamp()
				} else {
					product.time = common.curTimestamp()
				}

				this.$emit("update:product", product)
			},

			//确认
			confirm: function(type) {
				if (this.product1.is_spec_open == 1 && this.product1.choose_sku.length < Object.keys(this.product1
						.spec_list).length) {
					common.toast(this.product1.sku_name)
					return false
				}
				this.$emit('confirm', {
					type: type, //1--加入购物车 2--立即购买 3--确定
					choose_sku: this.product1.choose_sku.sort().join('_'),
					buy_number: this.number,
					sku_name: this.product1.sku_name
				});
			},

		}
	}
</script>

<style scoped>
	/* 浮层内容区域 */
	.layer-content {
		position: fixed;
		width: 100%;
		min-height: 800rpx;
		max-height: calc(90vh);
		left: 0;
		bottom: 0;
		border-radius: 20rpx 20rpx 0 0;
		padding-bottom: calc(env(safe-area-inset-bottom) + 130rpx);
	}

	/* 关闭按钮 */
	.close-btn {
		position: absolute;
		top: 30rpx;
		right: 0rpx;
	}

	/* 规格滚动区域 */
	.scroll-view {
		width: 100%;
		/* 最大高度 - 图片展示区域高度 - 底部条高度 - 安全距离 */
		max-height: calc(90vh - 260rpx - 130rpx - env(safe-area-inset-bottom));
	}

	/* 规格项 */
	.spec-item {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-right: 20rpx;
		padding: 0 20rpx;
		min-width: 160rpx;
		max-width: 670rpx;
		height: 60rpx;
		line-height: 56rpx;
		border-radius: 30rpx;
		box-sizing: border-box;
		text-align: center;
	}
	
	/* 选中状态规格项 */
	.spec-item.active {
		border: 2rpx solid var(--main);
		background: var(--mainLight);
		color: var(--main);
	}

	/* 没有库存规格项 */
	.none {
		border: 2rpx solid #f5f5f5;
		background: #f5f5f5;
		color: #ccc;
	}

	/* 常规规格项 */
	.normal {
		border: 2rpx solid #f5f5f5;
		background: #f5f5f5;
		color: #333;
	}
</style>
